<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${question.title}"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="/zico/css/zico.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
    <script src="/jquery/jquery.js"></script>
    <script src="/popper/umd/popper.js"></script>
    <script src="/bootstrap/js/bootstrap.js"></script>
    <!--引入markdown编辑器-->
    <link rel="stylesheet" href="/editormd/css/editormd.preview.css">
    <script src="/editormd/editormd.js"></script>
    <script src="/editormd/lib/marked.min.js"></script>
    <script src="/editormd/lib/prettify.min.js"></script>

    <link rel="stylesheet" href="/css/demo.css">
    <script src="/js/demo.js"></script>
    <script src="/js/moment.js"></script>

</head>
<body>
<div th:insert="~{navigation :: nav}"></div>
<main class="container">
    <div class="container-fluid p-5">
        <div class="row">
            <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
                <!--正文-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h4><span th:text="${question.title}"></span></h4>
                    <span class="demo-menu">
                    作者：<span th:text="${question.user.name}"></span> |
                     发布时间：<span th:text="${#dates.format(question.gmtCreate, 'yyyy-MM-dd HH:mm')}"></span> |
                     阅读数：<span th:text="${question.viewCount}"></span>
                    </span>
                    <hr>
                    <!--标签-->
                    <span class="badge badge-info mr-2 p-1" th:each="tag: ${question.getTag().split(',')}">
                        <i class="zi zi_tags" zico="标签黑"></i>
                        <span th:text="${tag}"></span>
                    </span>
                    <hr>
                    <!--编辑-->
                    <span th:if="${session.user != null && session.user.getId() == question.getCreator()}">
                        <a th:href="@{'/publish/' + ${question.id}}" class="demo-menu">
                        <i class="zi zi_pencilalt" zico="笔黑"></i>
                            编辑
                        </a>
                        <hr>
                    </span>
                    <div id="markdown-view">
                        <textarea style="display: none" th:text="${question.getDescription()}"></textarea>
                    </div>
                    <hr>
                </div>
                <!--回复-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 my-2">
                    <h4 class="mt-4 mb-0">
                        <span th:text="${question.commentCount}"></span> 个回复
                    </h4>
                    <hr class="my-2 mx-0">
                    <div class="media my-3 comment-info" th:each="comment : ${comments}">
                        <img class="mr-3 img-thumbnail" th:src="${comment.user.avatarUrl}"
                             alt="Generic placeholder image">
                        <div class="media-body py-3" th:id="${'comment-body-' + comment.id}">
                            <h5 class="mt-0" th:text="${comment.user.name}"></h5>
                            <div th:text="${comment.content}"></div>
                            <div class="text-secondary my-btns mt-1">
                                <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                                    <button type="button" class="btn btn-secondary">
                                        <i class="zi zi_thumbsup" zico="拇指向上"> <span
                                                th:text="${comment.likeCount}"></span></i>
                                    </button>
                                    <button type="button" class="btn btn-secondary" th:data-id="${comment.id}"
                                            onclick="collapseComments(this)">
                                        <i class="zi zi_commentalt" zico="评论列表"> <span
                                                th:text="${comment.commentCount}"></span></i>
                                    </button>
                                </div>
                                <span class="float-right"
                                      th:text="${#dates.format(comment.gmtCreate, 'yyyy-MM-dd')}"></span>
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse sub-comments"
                                 th:id="${'comment-'+ comment.id}">
                                <input type="text" class="form-control my-2" name="" id="" placeholder="评论一下……"
                                       th:id="${'input-'+comment.id}">
                                <div class="clearfix">
                                    <button class="btn btn-success my-2 float-right" type="button"
                                            onclick="comment(this)" th:data-id="${comment.id}">回复
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--回复框-->
                <div th:if="${session.user != null}">
                    <h4 class="mt-4 mb-0">
                        <span>提交回复</span>
                    </h4>
                    <hr>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="comment-section">
                        <div class="media">
                            <img class="mr-3 img-thumbnail" th:src="${session.user.avatarUrl}"
                                 alt="Generic placeholder image">
                            <div class="media-body py-3">
                                <h5 class="mt-0" th:text="${session.user.name}"></h5>
                            </div>
                        </div>
                        <input type="hidden" id="question-id" th:value="${question.id}">
                        <textarea class="form-control my-3" rows="6" id="comment_content"></textarea>
                        <button type="button" class="btn btn-success float-right" onclick="post()">回复</button>
                    </div>
                </div>

            </div>
            <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h4>发起人</h4>
                    <div class="media">
                        <img class="mr-3 img-thumbnail" th:src="${question.user.avatarUrl}"
                             alt="Generic placeholder image">
                        <div class="media-body">
                            <h5 class="mt-0" th:text="${question.user.name}"></h5>
                        </div>
                    </div>
                </div>
                <hr>
                <!--相关推荐-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <img src="/img/sing.jpg" alt="我的小姐姐呢" width="100%" class="img-thumbnail">
                </div>
                <hr>

                <!--相关问题-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <h4>相关问题</h4>
                    <ul class="question-rated">
                        <li th:each="related : ${relatedQuestions}">
                            <a th:href="@{'/question/' + ${related.getId()}}" th:text="${related.getTitle()}"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    $(function () {
        let testView = editormd.markdownToHTML("markdown-view", {
            // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    })
</script>
</body>
</html>